$(document).ready( function() {
    $('[id^="indexslide-item-"]').css("display","block").css("position","absolute").css("opacity",0).css("display","none");
                var indexslide = new Mg({
	                reference:"indexslide",
	                click:{
		                activated:[0],
		                cycle:true,
		                multiMode:'centered',
		                interactive:true,
                        anchorize:"useLinkHash",
		                multiLess:2, multiPlus:2,
                       // auto: 3000

	                }
                });

                indexslide.click.onEvent = function(){
	                $("#"+this.reference+"-item-"+this.deactivated).removeClass("active");
	                $("#"+this.reference+"-item-"+this.activated).addClass("active");
	                var pause = 200;
	                //
	                var arr = this.multiBeforeOut;
	                for(var i=0;i<arr.length;i++){
		                var path = $("#"+this.reference+"-item-"+arr[i]);
		                path.clearQueue().stop();
		                if(this.multiBeforeOut.length >= this.multiActivated.length){path.delay(i*pause);}
		                path.animate({top:120, left:-160,opacity:0, width:0, height:0},{queue:true, duration:1200, specialEasing: {top:bez, left:bez, opacity:bez, width:bez, height:bez}, complete:function(){$(this).css("display","none");}});
	                }
	                var arr = this.multiAfterOut;
	                for(var i=0;i<arr.length;i++){
		                var path = $("#"+this.reference+"-item-"+arr[i]);
		                path.clearQueue().stop();
		                if(this.multiAfterOut.length >= this.multiActivated.length){path.delay(i*pause);}
		                path.animate({top:120, left:450*2,opacity:0, width:0, height:0},{queue:true, duration:1200, specialEasing: {top:bez, left:bez, opacity:bez, width:bez, height:bez}, complete:function(){$(this).css("display","none");}}); // *2 cause of resizing
	                }
	                var arr = this.multiBeforeIn;
	                for(var i=0;i<arr.length;i++){
		                var path = $("#"+this.reference+"-item-"+arr[i]);
		                path.clearQueue().stop().css("left",-160).css("display","block").css("opacity",0).css("width",0).css("height",0).css("top",120);
	                }
	                var arr = this.multiAfterIn;
	                for(var i=0;i<arr.length;i++){
		                var path = $("#"+this.reference+"-item-"+arr[i]);
		                path.clearQueue().stop().css("left",450*2).css("display","block").css("opacity",0).css("width",0).css("height",0).css("top",120); // *2 cause of resizing
	                }
	                var arr = this.multiActivated;
	                for(var i=0;i<arr.length;i++){
		                var depth = Math.abs(indexslide.mapDistanceReverse(this.multiPlus, i, arr.length, 0));
		                var path = $("#"+this.reference+"-item-"+arr[i]);
		                path.css("display","block");
		                if(this.direction){path.clearQueue().stop().delay((i+this.distance)*pause);}else{path.clearQueue().stop().delay((this.multiPlus*2-(i+this.distance))*pause);} // gives delay
		                if(i>arr.length/2){var widthchange=400-(depth+3)*80;}else{var widthchange=0;} // width and height changes cause of resizing
		                path.animate({top:150-(depth+3)*20, left:i*80+widthchange, opacity:1, width:(depth+3)*80, height:(depth+3)*40},{queue:true, duration:1200, specialEasing: {top:bez, left:bez, opacity:bez, width:bez, height:bez}});

		                //

		                path.animate({zIndex:depth},{queue:false, duration:600+Math.abs(this.distance*100), specialEasing: {zIndex:bez}}); 
		                if(this.deactivated == undefined){path.css("z-index", depth)}; // this is the first call where deactivated is undefined
	                }
                }

                //
                indexslide.init(); 
});